import React, { useState } from 'react'
import { Card, Form, Input, Button } from 'antd-mobile'
import { EyeInvisibleOutline, EyeOutline } from 'antd-mobile-icons';
import { useNavigate } from 'react-router-dom'
import style from './index.module.css';

const Login = () => {
	const navigate = useNavigate()
	const [visible, setVisible] = useState(false)

	const onSubmit = () => {
		sessionStorage.setItem('user', '123')
		navigate('/home')
	}

	return (
		<div className={style.container}>
			<Card className={style.card}>
				<h1 className={style.logoText}>登录</h1>
				<Form layout='vertical'>
					<Form.Item label='用户名' name='username'>
						<Input clearable/>
					</Form.Item>
					<Form.Item
						label='密码'
						name='password'
						extra={
						<div className={style.eye}>
							{!visible ? (
							<EyeInvisibleOutline onClick={() => setVisible(true)} />
							) : (
							<EyeOutline onClick={() => setVisible(false)} />
							)}
						</div>
						}
					>
						<Input
							clearable
							type={visible ? 'text' : 'password'}
						/>
					</Form.Item>
				</Form>
				<Button block className={style.btnStyle} size='middle' onClick={() => onSubmit()}>
					提交
				</Button>
			</Card>
		</div>
	)
}

export default Login
